<template>
  <div class="articles">
    <h1>{{ mode }}</h1>
    <h1>最终显示数据：{{ show }}</h1>
    <h1>{{ homeInfo }}</h1>
    <h2>{{ title1 }}</h2>
    <h3>{{ title2 }}</h3>
    <h4>{{ title3 }}</h4>
    <h5>{{ title4 }}</h5>
    <h6>{{ title5 }}</h6>
    <h6>{{ title6 }}</h6>
    <p>
      <router-link to="/">首页</router-link>
      <router-link to="/HelloWorld">HelloWorld</router-link>
      <router-link to="/HelloWorldDemo">HelloWorldDemo</router-link>
    </p>
  </div>
</template>

<script>
export default {
  name: 'articles',
  data () {
    return {
      mode: process.env.VUE_ENV === 'server' ? '服务端渲染模式' : '客户端渲染模式',
      show: 'vue-ssr-3中会显示来自*.vue文件中预设的data{}中的数据',
      title1: '首页-Index-面朝大海的博客首页-Index',
      title2: '首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客',
      title3: '首页-Index-面朝大海的博客首页-Index-面朝大海',
      title4: '首页-Index-面朝大海的博客首页-Index-面朝大海的博客',
      title5: '首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客',
      title6: '首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客'
    }
  },
  serverRequest(store) {
    return store.dispatch("getHomeInfo");
  },
  mounted() {},
  computed: {
    homeInfo () {
      return this.$store.state.homeInfo;
    },
    show () {
      return 'vue-ssr-3中会显示show--' + this.$store.state.homeInfo;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
a {
  color: #42b983;
}
</style>
